<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
<!-- qtquick-designer.qdoc -->
  <title>Editing QML Files in Design Mode | Qt Creator Manual</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="index.html">Qt Creator Manual</a></td><td >Editing QML Files in Design Mode</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="index.html">Qt Creator Manual 4.11.1</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
  <link rel="prev" href="quick-projects.html" />
  <link rel="next" href="quick-components.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="quick-projects.html">Creating Qt Quick Projects</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="quick-components.html">Creating Components</a>
</p><p/>
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#snapping-to-parent-and-sibling-items">Snapping to Parent and Sibling Items</a></li>
<li class="level1"><a href="#hiding-item-boundaries">Hiding Item Boundaries</a></li>
<li class="level1"><a href="#selecting-items">Selecting Items</a></li>
<li class="level1"><a href="#previewing-component-size">Previewing Component Size</a></li>
<li class="level1"><a href="#specifying-canvas-size">Specifying Canvas Size</a></li>
<li class="level1"><a href="#refreshing-the-canvas">Refreshing the Canvas</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Editing QML Files in Design Mode</h1>
<span class="subtitle"></span>
<!-- $$$creator-using-qt-quick-designer.html-description -->
<div class="descr"> <a name="details"></a>
<p>Qt Creator opens <a href="creator-quick-ui-forms.html">UI forms</a> (ui.qml files) in the <b>Form Editor</b> tab in the Design mode. It is recommended that you use UI forms for components that you want to edit in the Design mode.</p>
<p class="centerAlign"><img src="images/qmldesigner-visual-editor.png" alt="&quot;Visual editor&quot;" /></p><p>To manage your project in the Design mode:</p>
<ul>
<li><b>Canvas</b> (1) is the working area where you create QML components and design applications. In the <b>Form Editor</b> tab, you can use a visual editor to design UIs, and in the <b>Text Editor</b> tab, you can use a code editor to edit the QML code generated by the visual editor.</li>
<li>Use the sidebars to select QML types to use in the project, to specify properties for them, and to view them in a tree structure, as well as to create connections and browse projects and files. You can select the content of the sidebars in the sidebar menu:<ul>
<li><b>Library</b> (2) displays the building blocks that you can use to design applications: predefined QML types, your own QML components, or Qt Quick Controls that you import to the project, and other resources. For more information, see <a href="quick-components.html">Creating Components</a>.</li>
<li><b>Navigator</b> (3) displays the items in the current QML file as a tree structure. For more information, see <a href="qtquick-navigator.html">Managing Item Hierarchy</a>.</li>
<li><b>Properties</b> (4) organizes the properties of the selected item. You can change the properties also in the <b>Text Editor</b>. For more information, see <a href="qtquick-properties.html">Specifying Item Properties</a>.</li>
<li><b>Connections</b> (5) enables you to create connections between objects, signals, and object properties. For more information, see <a href="qmldesigner-connections.html">Adding Connections</a>.</li>
<li><b>File System</b> shows all files in the currently selected directory. For more information, see <a href="creator-sidebar-views.html#viewing-the-file-system">Viewing the File System</a>.</li>
<li><b>Open Documents</b> shows currently open files.</li>
<li><b>Projects</b> shows a list of projects open in the current session. For more information, see <a href="creator-sidebar-views.html#viewing-project-files">Viewing Project Files</a>.</li>
</ul>
</li>
<li><b>States</b> pane (6) displays the different states of the item. QML states typically describe user interface configurations, such as the UI controls, their properties and behavior and the available actions. For more information, see <a href="quick-states.html">Adding States</a>.</li>
</ul>
<a name="snapping-to-parent-and-sibling-items"></a>
<h2 id="snapping-to-parent-and-sibling-items">Snapping to Parent and Sibling Items</h2>
<p>You design applications on the canvas by placing items on it.</p>
<p>When you are working on a design, you can use snapping to align items on the canvas. Click the <img src="images/snapping.png" alt="" /> button to have the items snap to their parent or sibling items. Snapping lines automatically appear to help you position the items. Click the <img src="images/snapping_and_anchoring.png" alt="" /> button to anchor the item to the items that you snap to.</p>
<p>Choose <b>Tools</b> &gt; <b>Options</b> &gt; <b>Qt Quick</b> &gt; <b>Qt Quick Designer</b> to specify settings for snapping. In the <b>Parent item padding</b> field, specify the distance in pixels between the parent item and the snapping lines. In the <b>Sibling item spacing</b> field, specify the distance in pixels between sibling items and the snapping lines.</p>
<p>The following image shows the snapping lines (1) when <b>Parent item padding</b> is set to 5 pixels.</p>
<p class="centerAlign"><img src="images/qmldesigner-snap-margins.png" alt="&quot;Snapping lines on canvas&quot;" /></p><a name="hiding-item-boundaries"></a>
<h2 id="hiding-item-boundaries">Hiding Item Boundaries</h2>
<p>The Design mode displays the boundaries of items on the canvas. To hide the boundaries, click the <img src="images/boundingrect.png" alt="" /> button.</p>
<a name="selecting-items"></a>
<h2 id="selecting-items">Selecting Items</h2>
<p>When you point the mouse to overlapping items, the frontmost item is selected by default. However, items that do not have any content, such as the mouse area, are typically located in front of items that do have content, such as rectangles or border images. To select items with content by default, click the <img src="images/qmldesigner-only-select-items-with-content.png" alt="" /> button.</p>
<a name="previewing-component-size"></a>
<h2 id="previewing-component-size">Previewing Component Size</h2>
<p>The width and height of the root item in a QML file determine the size of the component. You can reuse components, such as buttons, in different sizes in other QML files and design UIs for use with different device profiles, screen resolution, or screen orientation. The component size might also be zero (0,0) if its final size is determined by property bindings.</p>
<p>To experiment with different component sizes, enter values in the <b>Override Width</b> and <b>Override Height</b> fields (1) on the canvas toolbar. The changes are displayed on the canvas (2) and in the <b>States</b> pane (3), but the property values are not changed permanently in the QML file. You can permanently change the property values in the <b>Properties</b> pane (4).</p>
<p class="centerAlign"><img src="images/qmldesigner-preview-size.png" alt="&quot;Canvas width and height&quot;" /></p><a name="specifying-canvas-size"></a>
<h2 id="specifying-canvas-size">Specifying Canvas Size</h2>
<p>To change the canvas size, select <b>Tools</b> &gt; <b>Options</b> &gt; <b>Qt Quick</b> &gt; <b>Qt Quick Designer</b> and specify the canvas width and height in the <b>Canvas</b> group.</p>
<a name="refreshing-the-canvas"></a>
<h2 id="refreshing-the-canvas">Refreshing the Canvas</h2>
<p>When you open QML files in the Design mode, the items in the file are drawn on the canvas. When you edit the item properties, the QML file and the image on the canvas might get out of sync. For example, when you change the position of an item within a column or a row, the new position might not be displayed correctly on the canvas.</p>
<p>To refresh the image on the canvas, press <b>R</b> or select the <img src="images/reset.png" alt="" /> (<b>Reset View</b>) button.</p>
</div>
<!-- @@@creator-using-qt-quick-designer.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="quick-projects.html">Creating Qt Quick Projects</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="quick-components.html">Creating Components</a>
</p>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2019 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
